import { Button, Divider, Menu, theme } from 'antd';
import type { MenuProps } from 'antd';
import { useEffect } from 'react';
import { useNavigate } from 'react-router';
import CustomerCard from '../components/Customer/CustomerCard.tsx';
import CustomerHome from '../components/Customer/CustomerHome.tsx';
import CustomerInfo from '../components/Customer/CustomerInfo.tsx';
import MainPageLayout from '../components/MainPageLayout.tsx';
import { useCustomerState } from '../stores/CustomerStore.ts';

const menu_items: MenuProps['items'] = [
  {
    key: 'home',
    label: '首页',
  },
  {
    key: 'cardManagement',
    label: '银行卡管理',
  },
  {
    key: 'customerInfo',
    label: '客户信息',
  },
];

function getTimeOfDayGreeting() {
  const hour = new Date().getHours();

  if (hour >= 5 && hour < 12) {
    return '早上好！'; // Good morning
  }
  if (hour >= 12 && hour < 18) {
    return '下午好！'; // Good afternoon
  }
  return '晚上好！'; // Good evening
}

function Customer() {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const { customer, setCustomer, customerContentKey, setCustomerContentKey } =
    useCustomerState();
  const navigate = useNavigate();

  useEffect(() => {
    if (!customer) {
      navigate('/login');
    }
  }, [customer, navigate]);

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    setCustomerContentKey(e.key);
  };
  // @ts-ignore
  const handleLogout = (_) => {
    setCustomer(null);
    setCustomerContentKey('home');
  };
  function RenderContent() {
    switch (customerContentKey) {
      case 'home':
        return <CustomerHome />;
      case 'cardManagement':
        return <CustomerCard />;
      case 'customerInfo':
        return <CustomerInfo />;
    }
  }
  return (
    <MainPageLayout
      title="客户中心 - SomeBank"
      description="SomeBank客户中心"
      headerContent={
        <>
          <div className="text-2xl mr-10" style={{ color: colorBgContainer }}>
            SomeBank
          </div>
          <Menu
            theme="dark"
            mode="horizontal"
            selectedKeys={[customerContentKey]}
            defaultSelectedKeys={['0']}
            items={menu_items}
            onClick={handleMenuClick}
            style={{ flex: 1, minWidth: 0 }}
          />
          <p className="justify-end text-gray-300">{`${
            customer?.customerName
          }, ${getTimeOfDayGreeting()}`}</p>
          <Divider type="vertical" />
          <Button type="link" onClick={handleLogout}>
            注销
          </Button>
        </>
      }
    >
      <RenderContent />
    </MainPageLayout>
  );
}

export default Customer;
